<template>
  <div>
    <el-button type="primary" @click="showDialog('insert','dialog1')">新增</el-button>
    <!-- 表格 -->
    <el-table :data="tableData" stripe border class="company-table" :height="tableHeight" style="width: 100%;"  v-loading="loading">
      <el-table-column fixed prop="id" label="id" sortable align="center" min-width="40"></el-table-column>
      <el-table-column prop="type" label="码表类型" sortable min-width="200"></el-table-column>
      <el-table-column prop="typeDesc" label="码表描述" sortable min-width="600"></el-table-column>
      <el-table-column fixed="right" label="操作"  align="center" min-width="90">
          <template slot-scope="scope">
              <el-button  @click="showDialog('update','dialog1',scope.row)" type="text" size="small">编辑</el-button>
              <el-button  @click="deleteDialog(scope.row)" type="text" size="small">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
    <!-- 详情 -->
        <el-dialog :title="dialog1.title" :visible.sync="dialog1.isShow" width="800px" top="60px" :close-on-click-modal="false" >
          <div  :style="{'height':(tableHeight-90)+'px','overflow-y':'auto'}">
            <el-tabs v-model="activeName" @tab-click="handleClick" >
                <el-tab-pane label="详细信息" name="1">
                    <el-form label-width="90px" :model="codeObj"  :rules="rules.dialog1" ref="ruleFormDialog1">
                        <el-form-item label="码表类型" prop="type"><el-input v-model="codeObj.type" ></el-input></el-form-item>
                        <el-form-item label="码表描述" prop="typeDesc"><el-input v-model="codeObj.typeDesc" type="textarea" :row="8"></el-input></el-form-item>
                    </el-form>
                    <div style="text-align: right;">
                        <el-button type="primary" @click="submitDialog" >提交</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane v-if="dialog1.title==='编辑码表'"  label="码表信息" name="2">
                    <el-button type="primary" @click="showDialog('insert','dialog2')"> 新增</el-button>
                    <el-table :data="tableCodeData" stripe border class="company-table" :height="tableHeight-212"  style="width: 100%;">
                        <el-table-column prop="code" label="参数" sortable min-width="130"></el-table-column>
                        <el-table-column prop="name" label="显示" sortable min-width="150"></el-table-column>
                        <el-table-column prop="remark" label="备注" sortable min-width="200"></el-table-column>
                        <el-table-column fixed="right" label="操作"  align="center" min-width="90">
                            <template slot-scope="scope">
                                <el-button  @click="showDialog('update','dialog2',scope.row)" type="text" size="small">编辑</el-button>
                                <el-button  @click="deleteCodeDialog(scope.row)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            </div>
        </el-dialog>

        <!-- 代码详情 -->
        <el-dialog :title="dialog2.title" :visible.sync="dialog2.isShow" width="410px" center :close-on-click-modal="false" >
            <el-form label-width="100px"  :model="subCodeObj"  :rules="rules.dialog2" ref="ruleFormDialog2">
                <el-form-item label="参数(code)" prop="code"><el-input v-model="subCodeObj.code"></el-input></el-form-item>
                <el-form-item label="显示(name)" prop="name"><el-input v-model="subCodeObj.name"></el-input></el-form-item>
                <el-form-item label="备注" prop="remark"><el-input v-model="subCodeObj.remark" type="textarea" :row="12"></el-input></el-form-item>
            </el-form>
            <div slot="footer" style="text-align: right;">
                <el-button type="primary" @click="submitCodeDialog" >提交</el-button>
            </div>
        </el-dialog>
  
  </div>
</template>
<script>
import api from 'plugins/axios/api.js';
export default {
  name:'codeTable',
  data(){
    return {
      codeList:[],/**码表列表 */
      tableData:[],/**表格列表 */
      loading:false,
      pagination:{ /**分页参数 */
        currentPage:1,
        pageSize:10,
        total:0
      },
      dialog1:{ /**弹框1 */ 
        isShow:false,
        title:''
      },
      dialog2:{/**弹框2 */ 
        isShow:false,
        title:''
      },
      codeObj:{},/**码表对象 */
      subCodeObj:{},/**码表参数对象 */
      tableCodeData:[],/**码表参数列表 */
      activeName:'1',
      rules:{
        dialog1:{/**码表表单验证规则 */
          type:[{required: true, message: '请输入码表类型', trigger: 'blur'}],
          typeDesc:[{ required: true, message: '请输入码表描述', trigger: 'blur'}]
        },
        dialog2:{/**码表参数表单验证规则 */
          code:[{ required: true, message: '请输入参数', trigger: 'blur'}],
          name:[{ required: true, message: '请输入显示', trigger: 'blur'}]
        }
      }
      
    }
  },
  computed:{
    tableHeight(){
      return this.$store.state.clientHeight-184;
    }
  },
  created(){
    this.getcodeList();
  },
  methods:{
    getcodeList(){/**获取码表列表 */
      let self = this;
      self.loading=true;
      api.codeType().then(res=>{
          self.loading=false;
          self.codeList=res.content;
          self.pagination.total =res.content.length;
          self.getTableList();
      },error=>{
        self.loading=false;
      });
    },
    getTableList(){/**获取码表表格list */
      this.tableData=this.codeList.slice((this.pagination.currentPage-1)*this.pagination.pageSize,this.pagination.currentPage*this.pagination.pageSize);
    },
    getCodeData() {/**获取码表参数列表 */
        let self = this;
        api.subCode(self.codeObj.id).then(res=>{
            self.tableCodeData = res.content;
        })
    },
    showDialog(type,dialogType,row){/**点击显示弹框 */
      let self = this;
      self[dialogType].title= `${type=='insert'?'新增':'编辑'}码表${dialogType==='dialog1'?'':'参数'}`
      self[dialogType].isShow=true;
      if(type==="update"){
        self.activeName='1';
        dialogType==="dialog1"?self.codeObj =row:self.subCodeObj= row;
      }else{
         dialogType==="dialog1"?self.codeObj ={}:self.subCodeObj= {
            code: '',
            id: '',
            name: '',
            remark: '',
            type: this.codeObj.id,
         };
      }
    },
    handleSizeChange(size){/**分页修改每页条数 */
      this.pagination.currentPage=1;
      this.pagination.pageSize=size;
      this.getTableList();
    },
    handleCurrentChange(cuttent){/**分页修改页数 */
      this.pagination.currentPage=cuttent;
      this.getTableList();
    },
    handleClick(tab,event){
      if(tab.name==='2'){
        this.getCodeData();
      }
    },
    submitDialog(){/**新增/编辑码表 */
      let self = this;
      let type =  self.dialog1.title === '新增码表' ? 'insert': ( self.dialog1.title === '编辑码表' ? 'update' : '' );
      self.$refs.ruleFormDialog1.validate((valid) => {
        if (valid) {
          api.insertAndUpdateCode(type,self.codeObj).then(res=>{
            self.dialog1.isShow = false;
            self.getcodeList();
          })
        }
      }) 
    },
    submitCodeDialog(){/**新增/编辑码表参数 */
      let self = this;
      let type =  self.dialog2.title === '新增码表参数' ? 'insert': ( self.dialog2.title === '编辑码表参数' ? 'update' : '' );
      self.$refs.ruleFormDialog2.validate((valid) => {
        if (valid) {
          api.insertAndUpdateSubcode(type,self.subCodeObj).then(res=>{
            self.dialog2.isShow = false;
            self.getCodeData();
          })
        }
      })
    },
    deleteDialog(row){/**删除码表 */
      let self = this;
      this.$confirm('是否删除码表?', '提示', {
          confirmButtonClass: 'el-button--warning'
      }).then(() => {
          api.deleteCode(row.id).then(res=>{
            self.getcodeList();
          });
      }).catch(() => {});
    },
    deleteCodeDialog(row){
      let self = this;
      this.$confirm('是否删除码表参数?', '提示', {
          confirmButtonClass: 'el-button--warning'
      }).then(() => {
          api.deleteSubcode(row.id).then(res=>{
              self.getCodeData();
          })
      }).catch(() => {});
    },
  }
}
</script>
<style lang="stylus" scoped>

</style>

